import React, { useContext } from 'react'
import { useNavigate } from 'react-router-dom'
import { CartListContext } from '@/App' 
import CartItem from '@/components/CartItem'
import { usePriceTotal } from '@/hooks'
export default function Cart() {
  const nav = useNavigate()
  const { cartList, cartDispatch } = useContext(CartListContext)
  const total = usePriceTotal(cartList)
  return (
    <div>
      <a href="#" onClick={() => nav(-1)}>Back</a>
      <h1>
        购物车列表
      </h1>
      <div>
        {
          cartList && cartList.map(item => (
            <CartItem key={ item.id } data={ item }
              cartList={cartList}
              cartDispatch={cartDispatch} 
            />
          ))
        }
      </div>
      <hr />
      <div>总计： { total } 元</div>
    </div>
  )
}
